<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body onload="main(document.getElementById('graphContainer'))">
    <div id="graphContainer">

    </div>
  </body>
</html>
    <script type="text/javascript">
        // var mxBasePath = "https://jgraph.github.io/mxgraph/javascript/src";
        var mxBasePath =   "https://cdn.jsdelivr.net/gh/jgraph/mxgraph@master/javascript/src"
    </script>
<!--    <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>-->
    <!-- <script src="./mxClient.js"></script> -->
<!--<script src="https://cdn.jsdelivr.net/gh/jgraph/mxgraph@master/javascript/src/js/mxClient.js"></script>-->
<script src="./mxClient.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jgraph/mxgraph@master/javascript/src/js/util/mxUtils.js"></script>

<script type="text/javascript">
    function main(container){
        // 先检查浏览器是否支持

      if(!mxClient.isBrowserSupported()){
        mxUtils.error("浏览器不支持",200,false)
      }
    //  禁用右键菜单
      mxEvent.disableContextMenu(container)
    //  使用容器创建画布对象
      const graph = new mxGraph(container)
    //  启用橡皮擦选中效果
      new mxRubberband(graph)
    //  获取默认的父节点，通常为根节点的第一个子节点
      var parent = graph.getDefaultParent();
   // 开启事务，可以在一步内添加如下所有元素，如果不用事务则try块中执行一步画一个元素
      graph.getModel().beginUpdate();
      try {
        // 使用自定义图片，可以是url、相对路径、绝对路径
        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, );
        // 使用内置形状
        var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30, 'shape=cloud;');
        // 连接v1和v2
        var e1 = graph.insertEdge(parent, null, '', v1, v2);
      }
      finally {
        // 结束事务，刷新画布
        graph.getModel().endUpdate();
      }


    }
</script>
<style>




</style>
